<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <!--<link rel="stylesheet" href="bower_components/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/css/datatables.css"/>-->

    <link href="/static/css/layout.css" rel="stylesheet" type="text/css">
    <link href="/static/css/default.css" rel="stylesheet" type="text/css">
    <link href="/static/css/iconfont.css" rel="stylesheet" type="text/css">
    <link href="/static/css/skin.css" rel="stylesheet" type="text/css">


    <!--[if lt IE 9]>
    <script src="/bower_components/respond/dest/respond.min.js"></script>
    <![endif]-->
    <script>
        var ctx = '';
        var basePath = '/gillion-web';
        var locale = 'zh-cn'
    </script>
    <script src="/bower_components/requirejs/require.js" data-main="/static/app.js" data-bootstrap-modules="'framework/tooltip/GillionTooltipModule'"></script>
    <style>
        form > div {
            margin: 5px;
            padding: 5px;
        }

        form label {
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body >
<div class="container-fluid">



    <div class="section-kx">
        <!-- 标题 -->
        <div class="title-kx">
            <em>提示(属性说明)</em>

        </div>
        <!-- 提示信息 margin-t20可去掉-->
        <div class="lay-list-01">

            g-tooltip : 既是指令属性 值也作为显示提示内容<br/>
            direction : 提示方向 值为bottom,right,top  不填则自动识别<br/>
            outter-box : 是否显示外框样式 值为true时表示有外框样式 默认不显示<br/>
            message-type : 消息类型 tip普通提示 warn错误警告样式 默认tip<br/>
            hide-event : 显示事件 值可为jquery事件如click,mouseenter等 默认为mouseenter<br/>
            show-event : 隐藏事件 值可为jquery事件如click,mouseleave等 默认为mouseleave<br/>
            on-before-show:显示事件之前触发事件 绑定父作用域的事件<br/>
            on-before-hide:隐藏事件之前触发事件 绑定父作用域的事件<br/>
        </div>
        <div class="lay-list-01">
            <ul class="clearfix">
                <li>
                    <!-- 下定位 pos-bottom -->
                    <div class="pos-hint margin-t20">
                        <a href="" class="text-p" g-tooltip="输入有误请重新输入" direction="bottom" test="title" >文字下提示</a>
                    </div>

                    <!--  右定位 pos-right  -->
                     <div class="pos-hint margin-t20">
                         <a href="javascript:void(0)" class="text-p"  g-tooltip="输入有误请重新输入" direction="right">文字右提示</a>

                     </div>

                     <!--  上定位 pos-top  -->
                     <div class="pos-hint margin-t20">
                         <a href="" class="text-p" g-tooltip="输入有误请重新输入" direction="top">文字上提示</a>
                     </div>
                 </li>
                 <li>
                     <!--  下定位 pos-bottom-h  -->
                     <div class="pos-hint margin-t20">
                         <a href="" class="text-p" g-tooltip="输入有误请重新输入" direction="bottom" test="title" outter-box="true">文字下提示</a>
                     </div>

                     <!--  右定位 pos-right-h  -->
                     <div class="pos-hint margin-t20">
                         <a href="javascript:void(0)" class="text-p"  g-tooltip="输入有误请重新输入" direction="right" outter-box="true">文字右提示</a>
                     </div>

                     <!--  上定位 pos-top-h  -->
                     <div class="pos-hint margin-t20">
                         <a href="" class="text-p" g-tooltip="输入有误请重新输入" direction="top" outter-box="true">文字上提示</a>
                     </div>
                 </li>
                 <li>
                     <!--  下定位 pos-bottom-h  -->
                     <div class="pos-hint margin-t20">
                         <a href="" class="text-p" g-tooltip="输入有误请重新输入" direction="bottom" message-type="warn" outter-box="true">文字下提示</a>
                     </div>

                     <!--  右定位 pos-right-h  -->
                     <div class="pos-hint margin-t20">
                         <a href="" class="text-p" g-tooltip="输入有误请重新输入" direction="right" message-type="warn" outter-box="true">文字下提示</a>
                     </div>

                     <!--  上定位 pos-top-h  -->
                     <div class="pos-hint margin-t20">
                         <a href="" class="text-p" g-tooltip="输入有误请重新输入" direction="top" message-type="warn" outter-box="true">文字下提示</a>
                     </div>
                 </li>
             </ul>
         </div>

         <div  style="margin-left: 1000px;width:200px;height: 200px;border:5px solid red;padding-top: 100px">

                 <a href="" class="text-p" g-tooltip="输入有误请重新输入"  message-type="warn" outter-box="true" hide-event="click">自动方向文字提示</a>

         </div>

        <div class="title-kx">
            <em>提示信息 服务(属性说明)</em>

        </div>

         <div  style="width:100%;padding-top: 100px">
             params:参数对象属性</br>
             params.gTooltip:信息内容 优先于title</br>
             params.title:信息内容</br>
             params.direction:信息方向位置 默认自动计算</br>
             params.fontColor:字体颜色 默认#737373</br>
             params.iconType:图标 默认icon-que（?）</br>
             params.iconColor:图标颜色 默认#00b7ee</br>
             params.outterBox:是否有外框 默认false</br>
             params.boxBorderColor:外边框颜色 默认#c8c8c8</br>
             params.className:额外class</br>
             element:要被创建消息的对象元素</br>
             var params = {}</br>
             var messages = GillionTooltipService.create(element,params);</br>
             messages.createMessageDom():创建消息元素</br>
             messages.remove():删除消息</br>
             messages.locate(elment)通过direction参数设置位置</br>
             messages.getMessage():通过gtooltip和title获取消息内容</br>
             messages.calculateDirection(me,next):计算显示方位 分别是right,top,bottom</br>
             messages.show():显示</br>
             messages.hide():隐藏</br>




         </div>
     </div>


     <!--<div ng-controller="DropdownController">
     <input type="text" g-dropdown source="roles" submit-name="roleIds" submit-model="newEmp.roleIds" display-prop="roleName" value-prop="roleId" />
     </div>-->
    <!--<div ng-controller="DropdownController">
    <g-dropdown source="roles" submit-name="roleIds" submit-model="newEmp.roleIds" display-prop="roleName" multi="true" value-prop="roleId"  required=""/>
    </div>
    <div ng-controller="DropdownController">
    <g-dropdown source="roles" submit-name="roleIds" submit-model="newEmp.roleIds" display-prop="roleName"  multi="true" if-add="true" value-prop="roleId" add-element="addEle()" />
    </div>-->
    <!--<div ng-controller="DropdownController">
        <g-radio source="roles" submit-name="roleIds" submit-model="newEmp.roleIds" display-prop="roleName" value-prop="roleId" />
    </div>-->
</div>
</body>
</html>